<template>
  <div id="dairen">
    <div class="field_box">
      <md-field>
        <md-input-item v-model="contactInfo" class="no-right-padding" ref="contactSelector" placeholder="请选择联系人" readonly @click.native="selectContact">
          <md-icon class="place_icon" name="drjc_contacts" slot="left"></md-icon>
        </md-input-item>
        <md-input-item v-model="type.text" class="no-right-padding" ref="typeSelector" placeholder="请选择乘车方式" readonly @click.native="selectType">
          <md-icon class="place_icon" name="dairen_car" slot="left"></md-icon>
        </md-input-item>
      </md-field>
    </div>
    <div class="adv" v-show="!type.value" v-if="getDaiAdv?getDaiAdv.url!='':false">
      <a :href="getDaiAdv?getDaiAdv.url:''" target="_blank">
        <img class="img" :src="getDaiAdv?getDaiAdv.img:''" />
      </a>
    </div>
    <pinche class="no-padding" v-if="type.value==1&&getSelectedContact" @bao="gotoBao"></pinche>
    <baoche class="no-padding" v-if="type.value==2&&getSelectedContact" @pin="gotoPin"></baoche>
  </div>
</template>

<script>
import '@/assets/svgs/drjc_contacts.svg';
import '@/assets/svgs/dairen_car.svg';
import Pinche from './Pinche';
import Baoche from './Baoche';
import { mapGetters } from 'vuex';
import { Field, FieldItem, Icon, InputItem } from 'mand-mobile';
import Popup from './popup';
export default {
  name: 'dairen',
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Icon.name]: Icon,
    [InputItem.name]: InputItem,
    [Pinche.name]: Pinche,
    [Baoche.name]: Baoche
  },
  data() {
    return {
      currentType: null,
      type: {}
    };
  },
  methods: {
    selectContact() {
      Popup.createContactsSelector();
    },
    selectType() {
      if (this.oneService) {
        if (this.hasPinService) {
          this.type = {
            text: '拼车',
            value: 1
          };
        } else {
          this.type = {
            text: '包车',
            value: 2
          };
        }
        return;
      }
      Popup.createTypeSelector().then(data => {
        this.type = data;
        // this.$store.commit('resetPin');
        // this.$store.commit('resetBao');
      });
    },
    reset() {
      this.type = {};
    },
    gotoBao() {
      this.type = {
        text: '包车',
        value: 2
      };
    },
    gotoPin() {
      this.type = {
        text: '拼车',
        value: 1
      };
    }
  },
  computed: {
    ...mapGetters(['getRoute', 'getDairenContacts', 'getSelectedContact', 'getDaiAdv']),
    hasPinService() {
      if (this.getRoute) {
        return this.getRoute.service_type.indexOf('1') > -1;
      } else {
        return false;
      }
    },
    hasBaoService() {
      if (this.getRoute) {
        return this.getRoute.service_type.indexOf('2') > -1;
      } else {
        return false;
      }
    },
    oneService() {
      if (!this.hasPinService || !this.hasBaoService) {
        return true;
      } else {
        return false;
      }
    },
    contactInfo() {
      if (this.getSelectedContact) {
        return this.getSelectedContact.name + ' ' + this.getSelectedContact.phone;
      } else {
        return '';
      }
    }
  }
};
</script>

<style lang="stylus">
#dairen {
  padding: 20px;

  .field_box {
    background-color: #fff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 22px;

    .no-right-padding {
      padding-right: 0px !important;
    }

    .field_item {
      height: 88px;
      font-size: 28px;
    }

    .place_icon {
      width: 24px;
      height: 20px;
    }
  }

  .no-padding {
    padding: 0px;
  }

  .adv {
    .img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      border-radius: 10px;
    }
  }
}
</style>
